<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title></title>
	<link rel="stylesheet" href="../../stylesheets/common.css" />
	<link rel="stylesheet" href="../../stylesheets/table.css" />
</head>
<style>
	.clearfix:after {
		content: "";
		height: 0;
		line-height: 0;
		display: block;
		visibility: hidden;
		clear: both
	}

	.clearfix {
		zoom: 1;
	}

	#table ul {
		width: 800px;
		border: 1px solid #ddd;
		border-bottom: none;
		height: 60px;
	}
	#table ul.header,#table ul.header li{
		height: 45px;
		line-height: 45px
	}
	#table ul.first{
		background: #f2f2f2;
	}
	#table ul.last{
		border-bottom: 1px solid #ddd;
	}

	#table ul li {
		float: left;
		width: 12.5%;
		border-right: 1px solid #ddd;
		box-sizing: border-box;
		text-align: center;
		height: 60px;
		line-height: 60px;
	}
	#table ul li.item{
		cursor: pointer;
	}
	#table ul li.last{
		border-right: none;
	}
	#table ul li.four span{
		float: left;
    width: 50%;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    box-sizing: border-box;
	}
	#table ul li span:first-child{
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		
	}
	#table ul li span:nth-child(2){
		border-bottom: 1px solid #ddd;
	}
	#table ul li span:nth-child(3){
		border-right: 1px solid #ddd;
	}
	
	#table ul li.two span{
		float: left;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
	}
	#table ul .active{
		background: #00abea4c;
	}
</style>

<body>
	<div class="place">
		<span class="label-span">位置：</span>
		<ul id="place-list" class="place-ul">
			<li>
				调班
			</li>
		</ul>
	</div>
	<div class="body-warp">
		<div class="panel" style="width:100%;">
			<div class="panel-title">
				<i class="form-icon"></i>
				<span class="title-text">调班</span>
			</div>
			<div class="panel-body" style="background: white;">
				<div class="filter-block" style="background: white;padding:0;">
					<div class="form-group">
						<a href="javascript:void(0);" id="changeBtn" class="btn">
							<i class="iconfont">&#xe649;</i>调班</a>
					</div>

				</div>
				<div id="table">
					<ul class="clearfix header first">
						<li>周次/星期</li>
						<li>星期一</li>
						<li>星期二</li>
						<li>星期三</li>
						<li>星期四</li>
						<li class="last">星期五</li>
					</ul>
					<ul class="clearfix">
						<li class="item week">第一周</li>
						<li class="four item">
							<span class="active">张三</span>
							<span>张三</span>
							<span>张三</span>
							<span>张三</span>
						</li>
						<li  class="two item"><span>张三</span>
							<span>张三</span></li>
						<li class="item four"><span>张三</span>
							<span>张三</span>
							<span>张三</span></li>
						<li class="item four">张三</li>
						<li class="last item">张三</li>
					</ul>
					<ul class="clearfix last">
						<li class="item week">第一周</li>
						<li class="four item">
							<span class="active">张三</span>
							<span>张三</span>
							<span>张三</span>
							<span>张三</span>
						</li>
						<li  class="two item"><span>张三</span>
							<span>张三</span></li>
						<li class="item four"><span>张三</span>
							<span>张三</span>
							<span>张三</span></li>
						<li class="item four">
							<p>张三</p></li>
						<li class="last item">张三</li>
					</ul>
				</div>
			</div>
			<div>
					var data = [
					<br />
					&nbsp;&nbsp;[<br />
						&nbsp;&nbsp;&nbsp;[{id:12323,name:'张三1'}],<br />
						&nbsp;&nbsp;&nbsp;[{id:12433,name:'张三3'},{id:14523,name:'张三2'}],<br />
						&nbsp;&nbsp;&nbsp;[{id:125433,name:'张三4'},{id:125633,name:'张三5'},{id:124513,name:'张三8'}],<br />
						&nbsp;&nbsp;&nbsp;[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		<br />
						&nbsp;&nbsp;&nbsp;[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}]		<br />		
						&nbsp;&nbsp;]
					<br />
				]
	
			</div>
		</div>
		
	</div>
	<script type="text/javascript" src="../../ext/jquery/jquery-1.11.3.min.js"></script>

	<script>
		$(function () {
			var oneDom = '',towDom = '',domIndex=0;			
			var data = [
				[
					[{id:12323,name:'张三1'}],
					[{id:12433,name:'张三3'},{id:14523,name:'张三2'}],
					[{id:125433,name:'张三4'},{id:125633,name:'张三5'},{id:124513,name:'张三8'}],
					[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		
					[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}],
					[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		
					[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}]				
				],
				[
					[{id:12323,name:'张三1'}],
					[{id:12433,name:'张三3'},{id:14523,name:'张三2'}],
					[{id:125433,name:'张三4'},{id:125633,name:'张三5'},{id:124513,name:'张三8'}],
					[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		
					[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}],
					[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		
					[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}]				
				],
				[
					[{id:12323,name:'张三1'}],
					[{id:12433,name:'张三3'},{id:14523,name:'张三2'}],
					[{id:125433,name:'张三4'},{id:125633,name:'张三5'},{id:124513,name:'张三8'}],
					[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		
					[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}],
					[{id:54123,name:'张三6'},{id:125644533,name:'张三7'},{id:12323,name:'张三9'},{id:12341233,name:'张三0'}],		
					[{id:125643,name:'张三11'},{id:1245645,name:'张三12'},{id:13412323,name:'张三13'}]				
				]
			]
			tableRender(data)
			// 切换
			$('#changeBtn').on('click',function(){
				var oneId = oneDom.attr('data-id');
				var towId = towDom.attr('data-id');
				var oneHtml = oneDom.html();
				var twoHtml = towDom.html();
				oneDom.attr('data-id',towId).html(twoHtml)
				towDom.attr('data-id',oneId).html(oneHtml)
			})
		
		function tableRender(data){
			if(!data) return;
			var html = '<ul class="clearfix header first"><li>周次/星期</li><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li class="last">星期天</li></ul>';
			for(var i =0;i<data.length;i++){
				for(var j=0;j<data[i].length;j++){
					if(j == 0){
						html += '<ul class="clearfix '+((i == data.length-1)?'last':'')+'"><li class="item week">第'+(i+1)+'周</li>';
					}
					html += '<li class="'+(data[i][j].length>2?'four ':'two ')+((j == data[i].length-1)?'last':'')+ ' item">'+tableSpanRender(data[i][j])+'</li>'
					if(j == data[i].length-1){
						html +='</ul>'
					}
				}
			}
			$('#table').html(html)
			$('#table').on('click',function(e){
				if($(e.target).children().length > 1 || $(e.target).hasClass('week')){
					return;
				}
				if($(e.target).hasClass('active')){
					if(oneDom != '' && oneDom.attr('data-id') == $(e.target).attr('data-id')){
						oneDom = ''
					}else if(towDom != '' && towDom.attr('data-id') == $(e.target).attr('data-id')){
						towDom = ''
					}
					$(e.target).removeClass('active')
					return;
				}
				domIndex++;
				if(oneDom == ''){
					oneDom = $(e.target)
				}else if(towDom == ''){
					towDom = $(e.target)
				}else{
					if(domIndex%2 == 0){
						oneDom.removeClass('active')
						oneDom = $(e.target)
					}else{
						towDom.removeClass('active')
						towDom = $(e.target)
					}
				}
				$(e.target).addClass('active')
			})
		}
	});
		function tableSpanRender(data){
			if(data.length == 1){
				return '<p data-id="'+data[0].id+'">'+data[0].name+'</p>';
			}
			var html = ''
			for(var i=0;i<data.length;i++){
				html += '<span data-id="'+data[i].id+'">'+data[i].name+'</span>';
			}
			return html;
		}
		
	</script>
</body>

</html>